import {View, Text, Image, Block} from '@tarojs/components'
import React, { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import {IndexDiyModule, IndexDiyModuleLimit} from '../../utils/server.interface'
import {gotoPage} from '../../utils/tools'
import RightArrow from '../../components/icon/right-arrow'
import Float from '../../components/float/float';
import {platform} from "../../utils/platform-settting.service";
import './index-sale.scss'

const defaultProps: IndexDiyModule = {
  name: '',
  moreUrl: '',
  data: [],
  isUser: true,
  type: ''
}
const IndexSaleLimit2: React.FC<IndexDiyModule> = (props) => {
  const [goods, setGoods] = useState<IndexDiyModuleLimit[]>([])
  const [firstGood, setFirstGood] = useState<IndexDiyModuleLimit>({
    id: 0,
    status: 0,
    beginTime: 0,
    endTime: 0,
    img: '',
    name: '',
    url: '',
    sub_title: '',
    progress: 0,
    price: 0,
    market_price: 0,
    nowTime: 0,
  })

  const dataColor = Taro.getStorageSync('colorData');

  useEffect(() => {
    const firstGoods: any = props.data.slice(0, 1)[0]
    const good = props.data.slice(1)
    setFirstGood(firstGoods)
    setGoods(good)
  }, [firstGood, props.data])

  const renderRefundSignOfRight = (item) => {
    const refund_signArr = item.refund_sign ? item.refund_sign.split(",") : "";

    if(refund_signArr.length > 0) {
      return refund_signArr.map((sign, index) => (
        !!sign &&
        <Text
          key={index} className='label'
          style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
        >{sign}</Text>
      ))
    }

    return <Block />;
  }

  return (
    <View className='index-sale-1 index-sale-box'>
      {(props.name || props.moreUrl) && <View className='title-box'>
        <View className='title'>{props.name}</View>
        {!!props.moreUrl && <View className='more' onClick={() => gotoPage(props.moreUrl)}>
          <Text>更多</Text>
          <RightArrow />
        </View>}
      </View>}
      {!props.name && !props.moreUrl && <View style='height: 10px' />}
      <View className='content-box'>
        {firstGood && <View className='wrap' onClick={()=>{Taro.navigateTo({url: firstGood.url})}}>
          <View className='swiper-box'>
            <Image src={firstGood.main_img || firstGood.img} mode='aspectFill' className='img' />
          </View>
          <View className='info'>
            <View className='name'>{firstGood.name}</View>
            {firstGood.sub_title && <View className='subTitle'>{firstGood.sub_title}</View>}
            {
              ((firstGood.serviceLabels && firstGood.serviceLabels.length > 0) || (firstGood && firstGood.refund_sign)) &&
              <View className='labels'>
                {firstGood.serviceLabels && firstGood.serviceLabels.length > 0 && firstGood.serviceLabels.map((items, index) =>
                  <Text
                    key={index} className='label'
                    style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
                  >{items.name}</Text>)}
                {
                  process.env.P_ENV === 'kd' && firstGood && firstGood.refund_sign &&
                  renderRefundSignOfRight(firstGood)
                }
              </View>
            }
            {(process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') && firstGood.is_free_visit && firstGood.is_free_visit == 1 ?
              <View className='info-box'>
                <View className='left'><View className='price' /></View>
                <View className='right'><View className='snapped-up'>免费入园</View></View>
              </View> :
              <View className='info-box'>
                <View className='left'>
                  <View className='price'>
                    <View className='recommendation-block-item-bottom-price' style={`color: ${dataColor.priceColor};`}>
                      <Text className='m-min-b mark m-min-big-sale' style={`color: ${dataColor.priceColor}`}>¥</Text>
                      <View className='mark main m-min-big-sale inline'
                        style={`color: ${dataColor.priceColor}`}
                      >
                        <Float value={firstGood.price} />
                      </View>
                    </View>
                    {!!firstGood.is_activity ? <Block>
                      <Text className='discount' style={`background-color: ${dataColor.priceColor};`}>拼团价</Text>
                    </Block> : <Block>
                      {!!firstGood.discount &&
                      <Text className='discount' style={`background-color: ${dataColor.priceColor};`}><Text
                        className='font-family-price'
                      >{firstGood.discount}</Text>折</Text>}
                    </Block>}
                    <Text className='m-min-b market-price margin-left m-min-big-sale'
                      style={`color: ${dataColor.originalPriceColor}`}
                    >市场价 ¥</Text>
                    <View className='m-min-b market-price m-min-big-sale inline'
                      style={`color: ${dataColor.originalPriceColor}`}
                    >
                      {firstGood.market_price || firstGood.marketPrice || 0}
                    </View>
                  </View>
                </View>
                <View className='right'>
                  {(!process.env.DISTINGUISH_IDENTITY || props.isUser || !firstGood.commission_price) &&
                  <View className='snapped-up'>{firstGood.is_activity == 1 ? '立即拼团' : '立即抢购'}</View>}
                  {process.env.DISTINGUISH_IDENTITY && !props.isUser && !!firstGood.commission_price && <View className='share-earn'>
                    <View className='share-left'>分享赚</View>
                    <View className='price'>
                      <Text>￥</Text>
                      <View className='true-price-share font-family-price inline'>
                        <Float value={firstGood.commission_price || 0} />
                      </View>
                    </View>
                  </View>}
                </View>
              </View>}
          </View>
        </View>}
      </View>
      {goods.length > 0 && goods.map(item => <View key={item.id} className='good-item'
        onClick={()=>{Taro.navigateTo({url: item.url})}}
      >
        <View className='wrap'>
          <View className='cover'>
            <Image src={item.main_img || item.img} mode='aspectFill' className='img' />
            {!!item.is_activity ? <Block>
              <Text className='discount' style={`background-color: ${dataColor.priceColor};`}>拼团价</Text>
            </Block> : <Block>
              {!!item.discount &&
              <Text className='discount' style={`background-color: ${dataColor.priceColor};`}><Text
                className='font-family-price'
              >{item.discount}</Text>折</Text>}
            </Block>}
          </View>
          <View className='info-box'>
            <View>
              <View className='name'>{item.name}</View>
              {item.sub_title && <View className='subTitle'>{item.sub_title}</View>}
              {!!platform.info.is_show_sales_volume && !!item.salesVolume &&
              <View className='subTitle'>销量：{item.salesVolume}笔</View>}
            </View>
            <View className='left goods-like-left'>
              <View className='price price-base-line'>
                <View className='recommendation-block-item-bottom-price' style={`color: ${dataColor.priceColor};`}>
                  <Text className='m-min-b mark m-min-big-sale' style={`color: ${dataColor.priceColor}`}>¥</Text>
                  <View className='mark main m-min-big-sale inline' style={`color: ${dataColor.priceColor}`}>
                    <Float value={item.price || 0} />
                  </View>
                </View>
                <Text className='m-min-b market-price m-min-big-sale margin-left'
                  style={`color: ${dataColor.originalPriceColor}`}
                >¥</Text>
                <View className='m-min-b market-price m-min-big-sale view-inline'
                  style={`color: ${dataColor.originalPriceColor}`}
                >
                  {item.market_price || item.marketPrice || 0}
                </View>
              </View>
              {item.is_free_visit && item.is_free_visit == 1 && (process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') ?
                <View className='recommendation-block-item-bottom-right'>
                  <View className='snapped-up'>免费入园</View>
                </View> : <View className='recommendation-block-item-bottom-right'>
                  {/* 用户 */}
                  {(!process.env.DISTINGUISH_IDENTITY || props.isUser || !item.commission_price) &&
                  <View className='snapped-up'>{item.is_activity == 1 ? '立即拼团' : '立即抢购'}</View>}
                  {/* 达人 */}
                  {process.env.DISTINGUISH_IDENTITY && !props.isUser && !!item.commission_price && <View className='share-earn'>
                    <View className='share-left'>分享赚</View>
                    <View className='price'>
                      <Text>￥</Text>
                      <View className='true-price-share font-family-price'>
                        <Float value={item.commission_price || 0} />
                      </View>
                    </View>
                  </View>}
                </View>}
            </View>
          </View>
        </View>
      </View>)}
    </View>
  )
}

IndexSaleLimit2.defaultProps = defaultProps

export default IndexSaleLimit2
